<template>
  <div class="contain">
    <!-- 走马灯模块 -->
    <div class="model">
      <el-carousel
        height="422px"
        indicator-position="none"
        id="carousel-box"
        ref="carousel-box"
        @change="carouselChange"
        :autoplay="autoplay"
      >
        <el-carousel-item v-for="(item, index) in carouselList" :key="index">
          <div class="carousel">{{ index }}</div>
        </el-carousel-item>
      </el-carousel>
      <div class="indicator-model">
        <span>{{ carouselList[activeIndex].title }}</span>
        <div class="page clearFix">
          <i
            v-for="(item, index) in carouselList"
            :key="index"
            :class="activeIndex == index ? 'active' : ''"
            @click="changeItem(index)"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      autoplay: true,
      timeOut: null,
      activeIndex: "0",
      carouselList: [
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          path: ""
        },
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          path: ""
        },
        {
          title: "经开区多措并举做好2020年春季学期开学准备工作",
          path: ""
        }
      ]
    };
  },
  methods: {
    changeItem(index) {
      if (this.timeOut) {
        clearTimeout(this.timeOut);
      }
      this.autoplay = false;
      this.$refs["carousel-box"].setActiveItem(index);
      this.timeOut = setTimeout(() => {
        this.autoplay = true;
      }, 2 * 1000);
    },
    carouselChange(val) {
      this.activeIndex = val;
    }
  }
};
</script>

<style scoped lang="scss">
.contain {
  .model {
    position: relative;
    height: 422px;
    overflow: hidden;
    #carousel-box {
      .carousel {
        background-color: #999;
        height: inherit;
      }
    }
    .model:hover .indicator-model {
      transform: translateY(0);
      opacity: 1;
    }
    .indicator-model {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      background-color: rgba($color: #000000, $alpha: 0.4);
      height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px;
      color: #ffffff;
      transform: translateY(100%);
      opacity: 0;
      transition: 0.3s;
      z-index: 30;
      .page {
        i {
          width: 8px;
          height: 8px;
          background-color: #d8d8d8;
          opacity: 0.5;
          float: left;
          border-radius: 50%;
          margin: 0 8px;
          cursor: pointer;
        }
        i.active {
          opacity: 1;
        }
      }
    }
  }
}
</style>
